<template>
  <div class="lix-cate__container">
    <div class="lix-cate__nav">
      <!-- 三级导航栏最顶部 -->
      <scroll-view scroll-x="true" class="lix-cate__nav--body">
        <div class="item" v-for="(item, idx) in menu" :key="idx" :class="[topScrollSelectId == item.id ? 'active item' : 'item']" @click="naviTopScrollClick" :data-id="item.id" :data-idx="idx">
          <div class="name">{{ item.name }}</div>
        </div>
      </scroll-view>
      <!-- 三级导航栏的中间部分 -->
      <!-- 第二段不显示的逻辑 -->
      <!-- v-if="menu[topScrollSelectIdx] !== undefined && menu[topScrollSelectIdx].children.length > 0" -->
      <scroll-view scroll-x="true" class="lix-cate__nav--midd" v-if="menu[topScrollSelectIdx] !== undefined && menu[topScrollSelectIdx].children.length > 0">
        <div class="item" v-for="(item, idx) in menu[topScrollSelectIdx].children" :key="idx" :class="[middScrollSelectId === item.id ? 'active item' : 'item']" @click="naviMiddleScrollClick" :data-id="item.id">
          <div class="name">{{ item.name }}</div>
        </div>
      </scroll-view>
      <!-- 三级导航栏的区域、排序、时间部分 -->
      <div class="lix-cate__nav--bottom">
        <div class="item" v-for="(parentItem, idx) in naviListData" :key="idx" :class="[bottomScrollSelectId === parentItem.id ? 'active item' : 'item']" @click="naviBottomMenuClick" :data-id="parentItem.id" :data-idx="idx">
          <div class="name" v-if="idx === 0 && countyCode !== null">{{ defaultCounty }}</div>
          <div class="name" v-else>{{ parentItem.name }}</div>
          <image :src="bottomScrollSelectId === parentItem.id ? '../../static/image/up.png' : '../../static/image/down.png'"/>
        </div>
      </div>
      <div class="lix-cate__navmenu" v-if="bottomScrollSelectId !== null">
        <div class="lix-cate__navlist">
          <div class="item" v-for="(item, index) in naviListData[bottomScrollSelectIdx].children" :key="index" :data-idx="index" :data-id="item.id" @click="naviMenuListClick" :class="[naviListData[bottomScrollSelectIdx].name === item.key ? 'active item' : 'item']">
            <div class="name">{{ item.key }}</div>
          </div>
        </div>
        <div class="mark" :style="{height: navmenuHeight + 'px'}" @click="hideMenu"></div>
      </div>
    </div>
    <div class="lix-cate__content" :style="{top: menu[topScrollSelectIdx] !== undefined && menu[topScrollSelectIdx].children.length > 0 ? 250 + 'rpx' : 150 + 'rpx'}">
      <div class="lix-cate__content-wrapper">
        <!-- 无数据的异常流 -->
        <div class="lix-cate__abnor" v-if="noData">
          <image src="../../static/image/empty.png" />
          <div>未找到相关课程，快发布一个需求吧！</div>
          <navigator url="/pages/index/publish">发布需求</navigator>
          <!-- <button>发布需求</button> -->
        </div>
        <!-- 常规列表 -->
        <div class="lix-cate__list" v-if="!noData">
          <div class="lix-cate__item" v-for="(item, idx) in list" :key="idx" @click="go2CourseDetailPage" :data-id="item.id">
            <image :src="item.thumb" />
            <div class="info">
              <p class="title zan-ellipsis">{{ item.name }}</p>
              <p class="author">主讲师：{{ item.teacher }}</p>
              <p class="author">开课时间：{{ item.begintime }}</p>
              <p class="price"><span>￥</span>{{ item.price }}</p>
            </div>
          </div>
        </div>
        <ZanLoadmore :loading="loading" :nomore="! hasNextPage" v-if="!noData"/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { CATEGORY_GET_INDEX, CATEGORY_GET_LIST } from '../../store/mutation-types';
import ZanLoadmore from '../../../node_modules/mpvue-zanui/src/components/zan/loadmore';

export default {
  components: {
    ZanLoadmore
  },
  computed: {
    ...mapGetters('category', {
      menu: 'menu',
      list: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    }),
    ...mapGetters('city', {
      defaultCounty: 'defaultCounty',
      countyCode: 'code'
    })
  },
  watch: {
    countyCode: function(newValue, oldValue) {
      console.log('分类页面属性变动');
      console.log(newValue);
      // this.destroyedState();
      this.getCourseListData(1);
    }
  },
  data() {
    return {
      topScrollSelectId: 1,
      topScrollSelectIdx: 1,
      middScrollSelectId: 1,
      bottomScrollSelectId: null,
      bottomScrollSelectIdx: null,
      scrollX: true,
      scrollLeft: 0,
      naviListData: [
        {
          id: 1,
          name: '全部区域',
          children: [
          ]
        },
        {
          id: 2,
          name: '排序方式',
          children: [
            {id: 1, key: '智能排序', value: 'auto'},
            {id: 2, key: '最新上架', value: 'last'},
            {id: 3, key: '最近开课', value: 'recent'}
          ]
        },
        {
          id: 3,
          name: '全部时间',
          children: [
            {id: 1, key: '今天', value: 'today'},
            {id: 2, key: '明天', value: 'tomorrow'},
            {id: 3, key: '本周末', value: 'weekend'},
            {id: 4, key: '一周内', value: 'week'},
            {id: 5, key: '一月内', value: 'month'}
          ]
        }
      ],
      navmenuHeight: 0,
      isAbnor: false,
      selectCounty: null,
      sortType: null,
      timeType: null,
      menuId: null
    };
  },
  onLoad(option) {
    const sysInfo = wx.getSystemInfoSync();
    console.log(sysInfo);
    const winHeight = sysInfo.windowHeight;
    console.log(winHeight);
    this.navmenuHeight = winHeight;

    console.log('跳转参数: -> ', option);
    if (option.id !== undefined) {
      this.menuId = option.id;
      this.topScrollSelectId = option.id;
      this.topScrollSelectIdx = parseInt(option.id, 10);
    }
    // 获取分类列表数据
    this.getCategoryMenu();
    // 获取课程的搜索数据
    this.getCourseListData(1);
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.getCourseListData(this.currentPage + 1);
    }
  },
  methods: {
    ...mapActions('category', {
      getCategoryMenu: CATEGORY_GET_INDEX,
      getCourseList: CATEGORY_GET_LIST,
      destroyedState: 'destroyedState'
    }),
    getCourseListData(page) {
      let params = {};
      if (this.sortType) {
        params['sort'] = this.sortType;
      }
      if (this.timeType) {
        params['timeType'] = this.timeType;
      }
      if (this.countyCode) {
        params['area'] = this.countyCode;
      }
      if (this.menuId) {
        params['id'] = this.menuId;
      }
      this.getCourseList({page: page, params: params});
    },
    // 顶部scroll-view item点击事件
    naviTopScrollClick(e) {
      console.log('navi top click');
      console.log(e);

      this.topScrollSelectId = e.mp.currentTarget.dataset.id;
      this.topScrollSelectIdx = e.mp.currentTarget.dataset.idx;
      this.middScrollSelectId = null;
      this.menuId = e.mp.currentTarget.dataset.id;

      // 重新根据设定参数请求数据
      this.destroyedState();
      this.getCourseListData(1);
    },
    // 中间scroll-view item点击事件
    naviMiddleScrollClick(e) {
      console.log('navi middle click');
      this.middScrollSelectId = e.mp.currentTarget.dataset.id;
      this.menuId = e.mp.currentTarget.dataset.id;

      // 重新根据设定参数请求数据
      this.destroyedState();
      this.getCourseListData(1);
    },
    // 底部菜单栏 三个顶级 item点击事件
    naviBottomMenuClick(e) {
      const selectId = e.mp.currentTarget.dataset.id;
      console.log(selectId);
      if (selectId === 1) {
        // 进入地区选择界面
        this.bottomScrollSelectId = null;
        this.bottomScrollSelectIdx = null;
        wx.navigateTo({
          url: '/pages/index/selectcity'
        });
        return;
      }
      this.bottomScrollSelectIdx = e.mp.currentTarget.dataset.idx;
      if (this.bottomScrollSelectId === null) {
        this.bottomScrollSelectId = selectId;
      } else if (this.bottomScrollSelectId !== selectId) {
        this.bottomScrollSelectId = selectId;
      } else {
        this.bottomScrollSelectId = null;
      }
    },
    // 底部菜单栏 列表 item点击事件
    naviMenuListClick(e) {
      const tempNaviListData = this.naviListData;
      const index = e.mp.currentTarget.dataset.idx;
      const currentParentItem = this.naviListData[this.bottomScrollSelectIdx];
      const currentItem = currentParentItem.children[index];
      tempNaviListData[this.bottomScrollSelectIdx].name = currentItem.key;
      this.naviListData = tempNaviListData;

      // 智能排序的选择
      if (this.bottomScrollSelectIdx === 1) {
        this.sortType = currentItem.value;
        console.log('智能排序依据: -> ', this.sortType);
      } else if (this.bottomScrollSelectIdx === 2) {
        // 时间的排序依据
        this.timeType = currentItem.value;
        console.log('时间排序依据: -> ', this.timeType);
      }

      // 重新根据设定参数请求数据
      this.destroyedState();
      this.getCourseListData(1);

      this.hideMenu();
    },
    hideMenu() {
      this.bottomScrollSelectId = null;
    },
    go2CourseDetailPage(e) {
      console.log(e);
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/courseDetail?classid=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/category.scss";
</style>
